import {useTranslation} from 'react-i18next';
import classNames from 'classnames';
import {useLocation, Link} from 'react-router-dom';
import styles from "./index.module.scss";
import { useMemo } from 'react';

export default function KnowledgeNavigation() {
  const {t} = useTranslation();
  const location = useLocation();
  const activeKey = useMemo(
        () => {
            if (location.pathname.includes('encyclopedia')) {
            return 'encyclopedia';
            }
            if (location.pathname.includes('faq')) {
            return 'faq';
            }
            return 'media';
        },
        [location.pathname]
    );

  return (
    <div className={styles.content}>
        <div className={styles.main}>
            <div className={styles.section}>
            <div className={styles.subBlock}>
                <div className={classNames(styles.div3, activeKey === 'encyclopedia' && styles.active)}>
                    <Link to="/knowledge/encyclopedia">
                        <div className={styles.text2}>
                            <span className={styles.text2__seg0}>{t('服务简介')}</span>
                        </div>
                    </Link>
                </div>
                <div className={classNames(styles.div3, activeKey === 'faq' && styles.active)}>
                    <Link to="/knowledge/faq">
                        <div className={styles.text2}>
                            <span className={styles.text2__seg0}>{t('答疑解惑')}</span>
                        </div>
                    </Link>
                </div>
                <div className={classNames(styles.div3, activeKey === 'media' && styles.active)}>
                    <Link to="/knowledge/media">
                        <div className={styles.text2}>
                            <span className={styles.text2__seg0}>{t('媒体资源')}</span>
                        </div>
                    </Link>
                </div>
            </div>
            </div>
        </div>
    </div>
  );
}
